React本身並沒有特別限定專案資料夾的設定方式,但這邊建議可以朝以下兩種方式著手:
將CSS、JS依照各功能或不同單元頁去建立資料夾。
common/
Avatar.js
Avatar.css
APIUtils.js
APIUtils.test.js
feed/
index.js
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
FeedAPI.js
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
ProfileAPI.js
可以將相近的檔案放在一起,方便後續整理。
api/
APIUtils.js
APIUtils.test.js
ProfileAPI.js
UserAPI.js
components/
Avatar.js
Avatar.css
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
Profile.js
ProfileHeader.js
ProfileHeader.css
若是使用昨天的create-react-app開發的話,資料夾設定分別如下: